/*
 * @Author: chenyuanming
 * @Date: 2022-04-06 09:15:02
 * @LastEditTime: 2022-04-11 14:52:47
 * @LastEditors: chenyuanming
 */
import React, { useState, useEffect } from 'react';
import { Button, DatePicker, Select, Table } from 'antd';
import './home.css';
import * as homeApi from './homeApi'
import MyEcharts from '../../components/myEcharts/myEcharts';
const { RangePicker } = DatePicker;
const { Option } = Select;

const Home = () => {
    //年度曲线
    const [yearCount, setyearCount] = useState([]);
    //客户分析
    const [customerProfileData, setcustomerProfileData] = useState([]);
    const [customerOptions1, setcustomerOptions1] = useState([]);
    const [customerOptions2, setcustomerOptions2] = useState([]);
    const [customerOptions3, setcustomerOptions3] = useState([]);
    const [customerOptions4, setcustomerOptions4] = useState([]);
    const [customerOptions5, setcustomerOptions5] = useState([]);
    const [customerOptions6, setcustomerOptions6] = useState([]);
    // 跟单统计
    const [documetary1, setdocumetary1] = useState([]);
    const [documetary2, setdocumetary2] = useState([]);
    // 订单统计
    const [order1, setorder1] = useState([]);
    const [order2, setorder2] = useState([]);
    //合同统计
    const [contract1, setcontract1] = useState([]);
    const [contract2, setcontract2] = useState([]);
    //工单统计
    const [workOrder1, setworkOrder1] = useState([]);
    const [workOrder2, setworkOrder2] = useState([]);
    //售后统计
    const [afterSale1, setafterSale1] = useState([]);
    const [afterSale2, setafterSale2] = useState([]);
    //详细数据
    const [detailData, setdetailTableData] = useState([]);
    //订单提成
    const [orderMissionData, setorderMissionData] = useState([]);
    //获取年度曲线并且转换数据
    const data2echartsdata = (source) => {
        //年度曲线数据转换
        const monthSource = []
        //生成包含十二个月的二维数组
        for (let index = 1; index < 13; index++) {
            let month = index + '月'
            let temp = []
            temp.push(month)
            monthSource.push(temp)
        }
        // console.log(monthSource);//ok
        for (let outindex = 1; outindex < source.length; outindex++) {
            for (let inlineLndex = 0; inlineLndex < source[outindex].length; inlineLndex++) {
                monthSource[inlineLndex].push(source[outindex][inlineLndex])
            }
        }
        monthSource.unshift(['annualCurve', '新增客户', '跟单次数', '订单数量', "合同数量", "售后次数"])
        return monthSource
    }
    const annualCurveData = () => {
        homeApi.getannualCurveOption().then(res => {
            let temp = Object.values(res.data.data)
            temp.unshift(['annualCurve', "售后次数", "合同数量", '新增客户', '跟单次数', '订单数量'])
            // console.log(res.data.data);
            let monthSource = data2echartsdata(temp)
            setyearCount(monthSource)
        })
    }
    // 获取客户概况
    const customerData = () => {
        homeApi.getCustomerProfileOption().then(res => {
            // console.log(res.data.data);
            let data = Object.values(res.data.data)
            let temp = [
                ['客户管理'],
                ['联系人'],
                ['跟单管理'],
                ['订单管理'],
                ['合同管理'],
                ['售后管理'],
                ['工单管理']]
            for (let index = 0; index < temp.length; index++) {
                // console.log(data[index]);
                temp[index].push(...data[index])
            }
            temp.unshift(['customerProfileTemp', '24小时内更新', '7天内内更新', '30天内更新', '合计'])
            setcustomerProfileData(temp)
        })
    }
    //客户分析
    const customerAnalysisData = (employeeId, endDate, startDate) => {
        homeApi.getcustomerAnalysis(employeeId, endDate, startDate).then(res => {

            // let tempData1=res.data.data.customerTypeList;
            let tempData1 = res.data.data.customerTypeList.map((item, index) => {
                return { value: item.count, name: item.countName }
            });
            let tempData2 = res.data.data.customerLevelList.map((item, index) => {
                return { value: item.count, name: item.countName }
            });
            let tempData3 = res.data.data.customerSourceList.map((item, index) => {
                return { value: item.count, name: item.countName }
            });;
            let tempData4 = res.data.data.customerIndustryList.map((item, index) => {
                return { value: item.count, name: item.countName }
            });;
            let tempData5 = res.data.data.customerLocationList.map((item, index) => {
                return { value: item.count, name: item.countName }
            });;
            let tempData6 = res.data.data.comSortList.map((item, index) => {
                return { value: item.count, name: item.countName }
            });;
            setcustomerOptions1(tempData1)
            setcustomerOptions2(tempData2)
            setcustomerOptions3(tempData3)
            setcustomerOptions4(tempData4)
            setcustomerOptions5(tempData5)
            setcustomerOptions6(tempData6)

        })
    }
    //跟单统计的数据转换
    function data2documentaryData(rowData, arr) {
        let finData = []
        for (let i = 0; i < rowData[0].length; i++) {//得到由员工名字组成的数组
            let temp = []
            temp.push(rowData[0][i].countName)
            finData.push(temp)
        }
        for (let index = 0; index < rowData.length; index++) {
            for (let a = 0; a < rowData[index].length; a++) {
                finData[a].push(rowData[index][a].count)//得到处理后的数据
            }
        }
        finData.unshift(arr)
        return finData
    }
    //跟单统计
    const documentaryData = () => {
        homeApi.getDifferentTableCount(1).then(res => {
            //有问题，需要动态创建员工
            let temp1 = res.data.data.countByEmployee;
            let temp2 = res.data.data.countByDepartment;
            let byemployeeData = data2documentaryData(temp1, ['documentaryTemp', '7天内记录', '30天内记录', '所有记录'])
            let bydepartData = data2documentaryData(temp2, ['documentaryTemp', '7天内记录', '30天内记录', '所有记录'])
            setdocumetary1(byemployeeData)
            setdocumetary2(bydepartData)
        })
    }
    //订单统计
    const orderData = () => {
        homeApi.getDifferentTableCount(2).then(res => {

            let dataByEmployee = data2documentaryData(res.data.data.countByEmployee, ['orderTemp', '7天内记录', '30天内记录', '所有记录'])
            let dataByDep = data2documentaryData(res.data.data.countByDepartment, ['orderTemp', '7天内记录', '30天内记录', '所有记录'])
            setorder1(dataByEmployee)
            setorder2(dataByDep)

        })
    }
    //合同统计
    const contractData = () => {
        homeApi.getDifferentTableCount(3).then(res => {

            let dataByEmployee = data2documentaryData(res.data.data.countByEmployee, ['contractTemp', '7天内记录', '30天内记录', '所有记录'])
            let dataByDep = data2documentaryData(res.data.data.countByDepartment, ['contractTemp', '7天内记录', '30天内记录', '所有记录'])
            setcontract1(dataByEmployee)
            setcontract2(dataByDep)

        })
    }
    //工单统计
    const workOrder = () => {
        homeApi.getDifferentTableCount(4).then(res => {

            let dataByEmployee = data2documentaryData(res.data.data.countByEmployee, ['workOrderTemp', '7天内记录', '30天内记录', '所有记录'])
            let dataByDep = data2documentaryData(res.data.data.countByDepartment, ['workOrderTemp', '7天内记录', '30天内记录', '所有记录'])
            setworkOrder1(dataByEmployee)
            setworkOrder2(dataByDep)

        })
    }
    //售后统计
    const afterSaleData = () => {
        homeApi.getDifferentTableCount(5).then(res => {
            let dataByEmployee = data2documentaryData(res.data.data.countByEmployee, ['afterSaleTemp', '7天内记录', '30天内记录', '所有记录'])
            let dataByDep = data2documentaryData(res.data.data.countByDepartment, ['afterSaleTemp', '7天内记录', '30天内记录', '所有记录'])
            setafterSale1(dataByEmployee)
            setafterSale2(dataByDep)
        })
    }

    //获取详细数据
    const getDetailData = () => {
        let detail = []
        homeApi.getDetailData().then(res => {
            let temp1 = res.data.data.detail.employee
            for (let index = 0; index < temp1.length; index++) {
                let tempObj = {}
                tempObj.key = temp1[index].id
                tempObj.name = temp1[index].name
                tempObj.customer = temp1[index].count[0]
                tempObj.documentary = temp1[index].count[1]
                tempObj.order = temp1[index].count[2]
                tempObj.contract = temp1[index].count[3]
                tempObj.afterSale = temp1[index].count[4]
                tempObj.increase = temp1[index].count[5]
                tempObj.modify = temp1[index].count[6]
                tempObj.delete = temp1[index].count[7]
                detail.push(tempObj)
            }
            setdetailTableData(detail)
        })
    }
    //获取订单提成数据
    const getOrderMission=(res)=>{
        // const orderMissionData = [
        //     {
        //         key: 1,
        //         name: '超级管理员',
        //         newOrder: 5,
        //         finishedOrder: 6,
        //         orderTotal: 6,
        //         orderReceived: 6,
        //         missionPercentage: 6,
        //         monthMissionPercentage: 6,
        //     }
        // ]
        homeApi.getOrderCommission().then(res=>{
            console.log(res.data.data);
            // for (let index = 0; index < array.length; index++) {
            //     const element = array[index];
                
            // }
        })
    }
    useEffect(() => {
        customerAnalysisData()
        documentaryData()
        customerData()
        orderData()
        contractData()
        afterSaleData()
        annualCurveData()
        workOrder()
        getDetailData()
        getOrderMission()
    }, []);
    const [btnindex, setbtnindex] = useState(0);
    const btnList = [
        {
            id: 0,
            title: '客户概况'
        },
        {
            id: 1,
            title: '客户分析'
        },
        {
            id: 2,
            title: '跟单统计'
        },
        {
            id: 3,
            title: '订单统计'
        },
        {
            id: 4,
            title: '合同统计'
        },
        {
            id: 5,
            title: '售后统计'
        },
        {
            id: 6,
            title: '工单统计'
        }, {
            id: 7,
            title: '年度曲线'
        }, {
            id: 8,
            title: '详细数据'
        }, {
            id: 9,
            title: '订单提成'
        }
    ]
    const [isDepOrder, setisDepOrder] = useState(0);//按员工，按部门两个按钮的切换,订单
    const [isDepContract, setisDepContract] = useState(0);//按员工，按部门两个按钮的切换，合同
    const [isDepAfterSale, setisDepAfterSale] = useState(0);//按员工，按部门两个按钮的切换,售后
    const [isDepDocumentary, setisDepDocumentary] = useState(0);//按员工，按部门两个按钮的切换，跟单
    const [isDepWorkorder, setisDepWorkorder] = useState(0);//按员工，按部门两个按钮的切换，工单
    const [isDepdetail, setisdetail] = useState(0);//按员工，按部门两个按钮的切换，详细数据
    function onChange(value, dateString) {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
    }
    function onOk(value) {
        console.log('onOk: ', value);
    }
    //客户概况
    //echarts配置项
    const customerProfileOption = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            source: customerProfileData
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {
            axisLabel: {
                interval: 0,
                rotate: 40
            }, type: 'category'
        },
        // 声明一个 Y 轴，数值轴。
        yAxis: {
            name: '数量统计（个）'
        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    }
    const customerProfileTemp = (
        <div className='customerProfileContain'>
            <div className='customerProfileHead'>系统概况</div>
            <MyEcharts option={customerProfileOption} height={450} width={1200} />
        </div>
    )
    // 客户分析
    const customerAnalysisOption1 = {
        title: {
            text: '客户类型统计'
        },
        series: [
            {
                type: 'pie',
                stillShowZeroSum: false,

                data: customerOptions1
            }
        ]
    }
    const customerAnalysisOption2 = {
        title: {
            text: '客户级别统计'
        },
        series: [
            {
                type: 'pie',
                stillShowZeroSum: false,
                data: customerOptions2
            }
        ]
    }
    const customerAnalysisOption3 = {
        title: {
            text: '客户来源统计'
        },
        series: [
            {
                type: 'pie',
                stillShowZeroSum: false,
                data: customerOptions3
            }
        ]
    }
    const customerAnalysisOption4 = {
        title: {
            text: '所属行业统计'
        },
        series: [
            {
                type: 'pie',
                stillShowZeroSum: false,
                data: customerOptions4
            }
        ]
    }
    const customerAnalysisOption5 = {
        title: {
            text: '客户省份分布'
        },
        series: [
            {
                type: 'pie',
                stillShowZeroSum: false,
                data: customerOptions5
            }
        ]
    }
    const customerAnalysisOption6 = {
        title: {
            text: '客户商品大类'
        },
        series: [
            {
                type: 'pie',
                stillShowZeroSum: false,
                data: customerOptions6
            }
        ]
    }
    const customerAnalysisTemp = (
        <div>
            <div style={{ display: 'flex', paddingTop: '10px', textAlign: 'center' }}>
                <div style={{ paddingTop: '5px' }}>按日期查看：</div>
                <div style={{ width: '200px' }}>
                    <RangePicker size='middle'

                        onChange={onChange}
                        onOk={onOk}
                    />
                </div>
                <div style={{ marginLeft: '5px' }}>
                    <Select size='middle' style={{ width: 120 }} allowClear>
                        <Option value="lucy">Lucy</Option>
                    </Select>
                </div>
                <div >
                    <Button className='customerAnalysisBtn' style={{ background: '#4fabc1' }} type='primary'>立即查看</Button>
                    <Button className='customerAnalysisBtn' style={{ background: '#737373' }} type='primary'>清空条件</Button>
                </div>
                <div style={{ marginLeft: '5px', paddingTop: '5px' }}>
                    统计日期：<span style={{ color: 'red' }}>2022-04-01~2022-05-04</span>
                </div>
                <div style={{ paddingTop: '5px', color: '#ccc', marginLeft: '10px' }}>
                    数据来源于客户基本信息
                </div>
            </div>
            <div style={{ display: 'flex', marginTop: '20px', flexWrap: 'wrap' }}>
                <MyEcharts option={customerAnalysisOption1} width={550} height={450} />
                <MyEcharts option={customerAnalysisOption2} width={550} height={450} />
                <MyEcharts option={customerAnalysisOption3} width={550} height={450} />
                <MyEcharts option={customerAnalysisOption4} width={550} height={450} />
                <MyEcharts option={customerAnalysisOption5} width={550} height={450} />
                <MyEcharts option={customerAnalysisOption6} width={550} height={450} />

            </div>
        </div>
    )
    // 跟单统计
    // 配置项
    const documentaryOption1 = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            source: documetary1
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {
            axisLabel: {
                interval: 0,
                rotate: 40
            }, type: 'category'
        },
        // 声明一个 Y 轴，数值轴。
        yAxis: {

        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }]
    }
    const documentaryOption2 = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            source: documetary2
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {
            axisLabel: {
                interval: 0,
                rotate: 40
            }, type: 'category'
        },
        // 声明一个 Y 轴，数值轴。
        yAxis: {

        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }]
    }
    const documentaryTemp = (
        <div>
            <div style={{ marginLeft: '40%', marginTop: '5px' }}>
                <Button onClick={() => { setisDepDocumentary(0) }} className={isDepDocumentary === 0 ? 'homeactiveBtn' : 'homesimpleBtn'} type='primary'>按员工</Button>
                <Button onClick={() => { setisDepDocumentary(1) }} className={isDepDocumentary === 1 ? 'homeactiveBtn' : 'homesimpleBtn'} type='primary'>按部门</Button>
            </div>
            <div className='customerProfileContain' style={{ marginTop: '5px' }}>
                <div className='customerProfileHead'>{isDepDocumentary === 0 ? '按员工统计' : '按部门统计'}</div>
                <div>
                    <MyEcharts option={isDepDocumentary === 0 ? documentaryOption1 : documentaryOption2} height={450} width={1200} />
                </div>
            </div>

        </div>
    )
    // 订单统计
    const orderOption1 = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            source: order1
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {
            axisLabel: {
                interval: 0,
                rotate: 40
            }, type: 'category'
        },
        // 声明一个 Y 轴，数值轴。
        yAxis: {

        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }]
    }
    const orderOption2 = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            source: order2
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {
            axisLabel: {
                interval: 0,
                rotate: 40
            },
            type: 'category'
        },
        // 声明一个 Y 轴，数值轴。
        yAxis: {

        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }]
    }
    const orderTemp = (
        <div>
            <div style={{ marginLeft: '40%', marginTop: '5px' }}>
                <Button onClick={() => { setisDepOrder(0) }} className={isDepOrder === 0 ? 'homeactiveBtn' : 'homesimpleBtn'} type='primary'>按员工</Button>
                <Button onClick={() => { setisDepOrder(1) }} className={isDepOrder === 1 ? 'homeactiveBtn' : 'homesimpleBtn'} type='primary'>按部门</Button>
            </div>
            <div>
                <div className='customerProfileContain' style={{ marginTop: '5px' }}>
                    <div className='customerProfileHead'>{isDepOrder === 0 ? '按员工统计' : '按部门统计'}</div>
                    <div>
                        <MyEcharts option={isDepOrder === 0 ? orderOption1 : orderOption2} height={450} width={1200} />
                    </div>
                </div>
            </div>
        </div>
    )
    // 合同统计
    const contractOption1 = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            source: contract1
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {
            axisLabel: {
                interval: 0,
                rotate: 40
            }, type: 'category'
        },
        // 声明一个 Y 轴，数值轴。
        yAxis: {

        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'line' }, { type: 'line' }]
    }
    const contractOption2 = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            source: contract2
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {
            axisLabel: {
                interval: 0,
                rotate: 40
            }, type: 'category'
        },
        // 声明一个 Y 轴，数值轴。
        yAxis: {

        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'line' }, { type: 'line' }]
    }
    const contractTemp = (
        <div>
            <div style={{ marginLeft: '40%', marginTop: '5px' }}>
                <Button onClick={() => { setisDepContract(0) }} className={isDepContract === 0 ? 'homeactiveBtn' : 'homesimpleBtn'} type='primary'>按员工</Button>
                <Button onClick={() => { setisDepContract(1) }} className={isDepContract === 1 ? 'homeactiveBtn' : 'homesimpleBtn'} type='primary'>按部门</Button>
            </div>
            <div>
                <div className='customerProfileContain' style={{ marginTop: '5px' }}>
                    <div className='customerProfileHead'>{isDepContract === 0 ? '按员工统计' : '按部门统计'}</div>
                    <div>
                        <MyEcharts option={isDepContract === 0 ? contractOption1 : contractOption2} height={450} width={1200} />

                    </div>
                </div>
            </div>
        </div>
    )
    // 售后统计
    const afterSaleOption1 = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            source: afterSale1
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: { type: 'category' },
        // 声明一个 Y 轴，数值轴。
        yAxis: {

        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'line' }, { type: 'line' }]
    }
    const afterSaleOption2 = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            source: afterSale2
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: { type: 'category' },
        // 声明一个 Y 轴，数值轴。
        yAxis: {

        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'line' }, { type: 'line' }]
    }
    const afterSaleTemp = (
        <div>
            <div style={{ marginLeft: '40%', marginTop: '5px' }}>
                <Button onClick={() => { setisDepAfterSale(0) }} className={isDepAfterSale === 0 ? 'homeactiveBtn' : 'homesimpleBtn'} type='primary'>按员工</Button>
                <Button onClick={() => { setisDepAfterSale(1) }} className={isDepAfterSale === 1 ? 'homeactiveBtn' : 'homesimpleBtn'} type='primary'>按部门</Button>
            </div>
            <div>
                <div className='customerProfileContain' style={{ marginTop: '5px' }}>
                    <div className='customerProfileHead'>{isDepAfterSale === 0 ? '按员工统计' : '按部门统计'}</div>
                    <div>
                        <MyEcharts option={isDepAfterSale === 0 ? afterSaleOption1 : afterSaleOption2} height={450} width={1200} />

                    </div>
                </div>
            </div>
        </div>
    )
    // 工单统计
    const workOrderOption1 = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            source: workOrder1
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {
            axisLabel: {
                interval: 0,
                rotate: 40
            }, type: 'category'
        },
        // 声明一个 Y 轴，数值轴。
        yAxis: {

        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }]
    }
    const workOrderOption2 = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            source: workOrder2
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {
            axisLabel: {
                interval: 0,
                rotate: 40
            }, type: 'category'
        },
        // 声明一个 Y 轴，数值轴。
        yAxis: {

        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }]
    }
    const workOrderTemp = (
        <div>
            <div style={{ marginLeft: '40%', marginTop: '5px' }}>
                <Button onClick={() => { setisDepWorkorder(0) }} className={isDepWorkorder === 0 ? 'homeactiveBtn' : 'homesimpleBtn'} type='primary'>按员工</Button>
                <Button onClick={() => { setisDepWorkorder(1) }} className={isDepWorkorder === 1 ? 'homeactiveBtn' : 'homesimpleBtn'} type='primary'>按部门</Button>
            </div>
            <div>
                <div className='customerProfileContain' style={{ marginTop: '5px' }}>
                    <div className='customerProfileHead'>{isDepWorkorder === 0 ? '按员工统计' : '按部门统计'}</div>
                    <div>
                        <MyEcharts option={isDepWorkorder === 0 ? workOrderOption1 : workOrderOption2} height={450} width={1200} />

                    </div>
                </div>
            </div>
        </div>
    )
    // 年度曲线
    const annualCurveOption = {
        legend: {},
        tooltip: {},
        dataset: {
            // 提供一份数据。
            source: [...yearCount]
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: { type: 'category' },
        // 声明一个 Y 轴，数值轴。
        yAxis: {

        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }]
    }
    const annualCurve = (
        <div>
            <div>
                <div className='customerProfileContain' style={{ marginTop: '5px' }}>
                    <div className='customerProfileHead'>本年度客户统计报表</div>
                    <div>
                        <MyEcharts option={annualCurveOption} height={450} width={1200} />

                    </div>
                </div>
            </div>
        </div>
    )
    // 详细数据
    const detailColumnClick = (name) => {
        console.log(name);
    }
    const detailTabColumn = [
        {
            align: 'center',
            title: '姓名',
            width: 120,
            dataIndex: 'name',
            key: 'name',
            render: (name) => {
                return <div>
                    {name}
                    <Button onClick={() => {
                        detailColumnClick(name)
                    }} size='small' className='detailBtn' style={{ background: '#46a4da', width: '40px', height: '25px', borderRadius: '7px' }} type='primary'>查看</Button>
                </div>
            }
        }, {
            align: 'center',
            title: '客户',
            width: 120,
            dataIndex: 'customer',
            key: 'customer',
        },
        {
            align: 'center',
            title: '跟单',
            width: 120,
            dataIndex: 'documentary',
            key: 'documentary',
        },
        {
            align: 'center',
            title: '订单',
            width: 120,
            dataIndex: 'order',
            key: 'order',
        },
        {
            align: 'center',
            title: '合同',
            width: 120,
            dataIndex: 'contract',
            key: 'contract',
        },
        {
            align: 'center',
            title: '售后',
            width: 130,
            dataIndex: 'afterSale',
            key: 'afterSale',
        },
        {
            align: 'center',
            title: '新增',
            width: 120,
            dataIndex: 'increase',
            key: 'increase',
        },
        {
            align: 'center',
            title: '修改',
            width: 120,
            dataIndex: 'modify',
            key: 'modify',
        },
        {
            align: 'center',
            title: '删除',
            width: 120,
            dataIndex: 'delete',
            key: 'delete',
        }

    ]
    //表格项
    const detailTemp = (
        <div>
            <div style={{ display: 'flex', paddingTop: '10px', textAlign: 'center' }}>
                <div>
                    <RangePicker size='middle'
                        showTime={{ format: 'HH:mm' }}
                        format="YYYY-MM-DD HH:mm"
                        onChange={onChange}
                        onOk={onOk}
                    />
                </div>

                <div >
                    <Button className='customerAnalysisBtn' style={{ background: '#4fabc1' }} type='primary'>立即查看</Button>
                    <Button className='customerAnalysisBtn' style={{ background: '#737373' }} type='primary'>清空条件</Button>
                </div>
                <div style={{ marginLeft: '5px', paddingTop: '5px' }}>
                    统计日期：<span style={{ color: 'red' }}>2022-04-01~2022-05-04</span>
                </div>

            </div>
            <div style={{ marginLeft: '40%', marginTop: '5px' }}>
                <Button onClick={() => { setisdetail(0) }} className={isDepdetail === 0 ? 'homeactiveBtn' : 'homesimpleBtn'} type='primary'>按员工</Button>
                <Button onClick={() => { setisdetail(1) }} className={isDepdetail === 1 ? 'homeactiveBtn' : 'homesimpleBtn'} type='primary'>按部门</Button>
            </div>
            <div style={{ marginTop: '10px' }} className='mytab'>
                <div style={{ display: 'flex', background: '#eff0ef', height: '40px', lineHeight: '40px', fontWeight: 'bold' }}>
                    <div style={{ width: '67%', textAlign: 'center', borderRight: '1px solid #d9d9d9' }}>基本情况</div>
                    <div style={{ width: '30%', textAlign: 'center' }}>活跃状态(根据操作日志统计)</div>
                </div>
                <Table dataSource={detailData} columns={detailTabColumn} pagination={false} />
            </div>
        </div>
    )
    //订单提成
    //表格项
    const orderMissionTabColumn = [
        {
            align: 'center',
            title: '姓名',
            width: 120,
            dataIndex: 'name',
            key: 'name',

        }, {
            align: 'center',
            title: '新增订单数',
            width: 120,
            dataIndex: 'newOrder',
            key: 'newOrder',
        },
        {
            align: 'center',
            title: '已完成订单数',
            width: 120,
            dataIndex: 'finishedOrder',
            key: 'finishedOrder',
        },
        {
            align: 'center',
            title: '订单总金额',
            width: 120,
            dataIndex: 'orderTotal',
            key: 'orderTotal',
        },
        {
            align: 'center',
            title: '订单已收款',
            width: 120,
            dataIndex: 'orderReceived',
            key: 'orderReceived',
        },
        {
            align: 'center',
            title: '提成百分比',
            width: 130,
            dataIndex: 'missionPercentage',
            key: 'missionPercentage',
        },
        {
            align: 'center',
            title: '本月提成总金额',
            width: 120,
            dataIndex: 'monthMissionPercentage',
            key: 'monthMissionPercentage',
        }

    ]
   
    const orderCommission = (
        <div>
            <div style={{ display: 'flex', paddingTop: '10px', textAlign: 'center' }}>
                <div style={{ width: '200px' }}>
                    <RangePicker size='middle'
                        showTime={{ format: 'HH:mm' }}
                        format="YYYY-MM-DD HH:mm"
                        onChange={onChange}
                        onOk={onOk}
                    />
                </div>
                <div style={{ marginLeft: '5px' }}>
                    <Select size='middle' style={{ width: 120 }} allowClear>
                        <Option value="lucy">Lucy</Option>
                    </Select>
                </div>
                <div >
                    <Button className='customerAnalysisBtn' style={{ background: '#4fabc1' }} type='primary'>立即查看</Button>
                    <Button className='customerAnalysisBtn' style={{ background: '#737373' }} type='primary'>清空条件</Button>
                </div>
                <div style={{ marginLeft: '5px', paddingTop: '5px' }}>
                    统计日期：<span style={{ color: 'red' }}>2022-04-01~2022-05-04</span>
                </div>
                <div style={{ paddingTop: '5px', color: '#ccc', marginLeft: '10px' }}>
                    数据来源于订单管理【订单状态为“已完成”，按照“完成日期”计算当月提成】
                </div>
            </div>
            <div style={{ marginTop: '10px' }} className='mytab'>
                <Table dataSource={orderMissionData} columns={orderMissionTabColumn} pagination={false} />
            </div>
        </div>
    )
    return (
        <div>
            <div>
                {
                    btnList.map((item, index) => {
                        return <Button className={item.id === btnindex ? 'activeNav' : 'simpleBtn'} key={item.id} size='small' style={{ marginLeft: '1px', border: 'none' }} type="primary" onClick={(e) => {
                            setbtnindex(index)

                        }}>{item.title}</Button>
                    })
                }
            </div>
            {
                btnindex === 0 ? customerProfileTemp : btnindex === 1 ? customerAnalysisTemp : btnindex === 2 ? documentaryTemp : btnindex === 3 ? orderTemp : btnindex === 4 ? contractTemp : btnindex === 5 ? afterSaleTemp : btnindex === 6 ? workOrderTemp : btnindex === 7 ? annualCurve : btnindex === 8 ? detailTemp : btnindex === 9 ? orderCommission : ''
            }
        </div>
    );
}

export default Home;
